
<html>
<head>
<title>Change Password</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href  = "css/bootstrap.min.css" rel ="stylesheet">
	<link href  = "css/bootstrap.min.css" rel ="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles/tasks4.css" media="screen"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="scripts/jquery-2.0.3.js"></script>
	<script src="js/bootstrap.js"></script>
	<script>
        $(document).ready(function() {
                    alert("running script");
					var c = document.cookie;
             
                    $("#updateBtn").click(function() {
                        alert("clicked");
                        var newPassword = document.getElementById("updatePass").value;
						var oldPassword = document.getElementById("oldPass").value;
                        var Id = 1
                        var theData = "id=" + Id + "&" + "oldPassword=" + oldPassword + "&" + "newPassword=" + newPassword;

                        alert("Sending: " + theData);
                        $.ajax({
                            url: "http://localhost:8080/formswebapp/resources/user/password",
                            type: "POST",
                            dataType: "text",
                            contentType: "application/x-www-form-urlencoded",
                            data: theData,

                            success: function(result, status, jqxhr) {
							alert("Password Changed");
                            window.location.replace("login.html")
                            },

                            error: function(xhr, status, errorThrown) {
                                alert("error: " + status + " e: " + errorThrown);
                            }
                        });
                    });

                  
                   } );
					
    </script>
</head>

<body>
<!--Header-->
	<div class = "navbar navbar-inverse navbar-static-top">
		<div class="container">
			<div class = "navbar-header">
				<div class="tut-container-img">
						<img class="img-responsive" src="cculogo.png" alt=""></a>
					</div>
				<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
				</button><!--Create button for mobile site-->
			</div>
			<div class = "collapse navbar-collapse navHeaderCollapse">
				<ul class = "nav navbar-nav navbar-right">
					<li><a href = "user.html">Home</a></li>
					
					<li class = "dropdown">
						<a href = "#" class = "dropdown-toggle" data-toggle ="dropdown">All Forms<b class="caret"></b></a>
						<ul class = "dropdown-menu">
							<li><a href = "courserepeat.html">Course Repeat Form</a></li>
							<li><a href = "coursesub.html">Course Substitution Form</a></li>
							<li><a href = "transcript.html"> Transcript Form</a></li>
							<li><a href = "specialpermisssion.html"> Special Permission Form</a></li>
						</ul>
					</li>
					
					<li class = "dropdown">
						<a href = "#" class = "dropdown-toggle" data-toggle ="dropdown">Social Media <b class="caret"></b></a>
						<ul class = "dropdown-menu">
							<li><a href = "http://twitter.com">Twitter</a></li>
							<li><a href = "http://facebook.com">Facebook</a></li>
							<li><a href = "https://plus.google.com/">Google+</a></li>
							<li><a href = "http://instagram.com">Instagram</a></li>
						</ul>
					</li>
					<li><a href = "#about" data-toggle ="modal">About</a></li>
					<li><a href = "#contact" data-toggle ="modal">Contact</a></li>
					<li>
						<a class="navbar-brand" href="setting.html">
							<i class="glyphicon glyphicon-cog"></i>
						</a>
					</li>
					<li>
						<button type="button" id="btnLogout" class="btn btn-default navbar-btn">Logout</button>
					</li>
					<li>
						<form class="navbar-form" role="search">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
							<div class="input-group-btn">
								<button class="btn btn-default" type="search"><i class="glyphicon glyphicon-search"></i></button>
							</div>
						</div>
						</form>
						
					</li>

				</ul>
			</div>	
		</div>
	</div>		
	
	<div class ="container">
		<div class = "row">
			<div class = "col-lg-9">
				<div class ="panel panel-default">
					<div class ="panel-body">
						<div class= "page-header">
						<p></p>
						<h4><b>Change Password</b></h4>
						<p></p>
							<form class="form-horizontal" role="form" autocomplete="on" >
							<div class="form-group">
								<label for="Name" class="col-lg-2 control-label">*Old Password</label>
								<div class="col-sm-4">
									<input type="password" class ="form-control" id="oldPass" placeholder="" autofocus required  >
								</div>
							</div>
							
							<div class="form-group">
								<label for="text" class="col-lg-2 control-label">* New Password</label>
								<div class="col-sm-4">
									<input type="password" class ="form-control" id="updatePass" placeholder="" required >
								</div>
							</div>	
							<p>(*) Indicates required field.</p>
								
							<button type="button" id="updateBtn">Update Password</button>
							
							<hr>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		
		<div class = "modal fade" id = "contact" role = "dialog">
			<div class = "modal-dialog">
				<div class = "modal-content">
					<form class = "form-horizontal">
						<div class = "modal-header">
							<h4>Contact Support</h4>
						</div>
						<div class = "modal-body">
							
							<div class ="form-group">
								<label for ="contact-name" class = "col-lg-2 control-label">Name:</label>
								<div class="col-lg-10">
									<input type ="text" class ="form-control" id ="contact-name" placeholder="Full Name">
								</div>
							</div>
						
							<div class ="form-group">
									<label for ="contact-email" class = "col-lg-2 control-label">Email:</label>
									<div class="col-lg-10">
										<input type ="email" class ="form-control" id ="contact-name" placeholder="you@example.com">
									</div>	
							</div>
							
							<div class ="form-group">
									<label for ="contact-message" class = "col-lg-2 control-label">Message:</label>
									<div class="col-lg-10">
										<textarea  class="form-control" rows =10"></textarea>
									</div>
							</div>
							
							
							
							<div class = "modal-footer">
								<a class = "btn btn-default" data-dismiss = "modal">Close</a>
								<button class ="btn btn-primary" type="submit">Submit</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div class = "modal fade" id = "about" role = "dialog">
			<div class = "modal-dialog">
				<div class = "modal-content">
					<form class = "form-horizontal">
						<div class = "modal-header">
							<h4>About</h4>
						</div>
						<div class = "modal-body">
							<div class ="form-group">
								<p> CSCI490</p>
								<p> Richard </p>
								<p> Hubert</p>
								<p> Ryan </p>
								<p> raroman@coastal.edu</p>
							</div>
							<div class = "modal-footer">
								<a class = "btn btn-default" data-dismiss = "modal">Close</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
<!--Footer-->
	<div class = "navbar navbar-inverse navbar-fixed-bottom">
		<div>
			<p class = "navbar-text pull-right">2014 Coastal Carolina University | P.O. Box 261954, Conway, SC 29528-6054 USA | +1 843-347-3161</p>
		</div>
	</div>
	
</body>
</html>